<!--Created by 熊超超 on 2017/8/4.-->
<template>
  <air-scroll pullDownRefresh @pullingDown="onPullingDown" ref="scroll" :data="list" mouseWheel>
    <!-- <img src="../../../assets/image/devices.jpg" style="position:absolute;z-index:0;height:100%"/> -->
    <div class="list">
      <mu-card class="m-b-20" v-for="device in list" :key="device.udid" style="background-color: transparent;">
        <mu-card-text>
          {{ device.nickName }}
        </mu-card-text>
        <mu-card-actions flex="main:right">
          <mu-flat-button label="详情" class="m-l-16" @click="detail(device)">
            <cc-icon name="msg" size="36" />
          </mu-flat-button>
        </mu-card-actions>
      </mu-card>
    </div>
  </air-scroll>
</template>

<script>
  import {mapState} from 'vuex'
  import mixin from '$g/mixin'
  import CFlight from '../../common/components/C-Flight'
  export default {
    components: {CFlight},
    mixins: [mixin.updateBar],
    data() {
      return {
        headerBar: {
          title: () => <div><cc-icon name="msg" size="36" />{this.$t('我的设备')}</div>,
          leftBtn: null,
          rightBtn: [{text: '删除'}]
        },
        footerBar: {active: '/fly'},
        list: []
      }
    },
    computed: {
      ...mapState({
        user: state => state.my.user
      })
    },
    created () {
      this.queryAllDevice()
    },
    methods: {
      async queryAllDevice () {
        const data = await this.$store.dispatch('queryAllDevice', {owner: this.user.id})
        if (data) {
          this.list = data.data
        } else {
          this.$refs.scroll.forceUpdate()
        }
      },
      onPullingDown () {
        setTimeout(() => this.getFly(), 2000)
      },
      detail (device) {
        this.$store.state.device = device
        this.$r.push('/detail')
      }
    }
  }
</script>

<style lang="less" scoped>
.select {
    color: rgba(0,0,0,.54);
    font-size: 0.28889rem;
    line-height: 0.83333rem;
    padding-left: 0.44444rem;
    width: 30%;
}
</style>
